export const useChart = (data: any) => {
  const xData: any = []
  const yValue: any = []

  data.forEach((item: any) => {
    xData.push(item.name)
    yValue.push(item.score)
  })

  const max = Math.max.apply(null, yValue)

  const options = {
    grid: {
      left: 0,
      right: 0,
      bottom: 0,
      top: 0,
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'none'
      },
      formatter: function (params: any) {
        return (
          params[0].name +
          '<br/>' +
          "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
          params[0].seriesName +
          ' : ' +
          params[0].value.toLocaleString() +
          ''
        )
      }
    },
    xAxis: {
      show: false,
      type: 'value',
      max: max
    },
    yAxis: [
      {
        type: 'category',
        inverse: true,
        axisLabel: {
          rich: {
            a: {
              color: '#fff',
              backgroundColor: '#FAAA39',
              width: 20,
              height: 20,
              align: 'center',
              borderRadius: 2
            },
            b: {
              color: '#fff',
              backgroundColor: '#4197FD',
              width: 20,
              height: 20,
              align: 'center',
              borderRadius: 2
            }
          },
          formatter: function (params, index) {
            if (index < 3) {
              return ['{a|' + (index + 1) + '}' + '  ' + params].join('\n')
            } else {
              return ['{b|' + (index + 1) + '}' + '  ' + params].join('\n')
            }
          }
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        data: xData
      },
      {
        type: 'category',
        position: 'right',
        inverse: true,
        axisTick: 'none',
        axisLine: 'none',
        show: true,
        axisLabel: {
          color: '#333',
          fontSize: '12'
        },
        data: yValue
      }
    ],
    series: [
      {
        name: '得分',
        type: 'bar',
        zlevel: 1,
        itemStyle: {
          borderRadius: 30,
          color: function (params) {
            // build a color map as your need.
            const colorList = [
              {
                colorStops: [
                  {
                    offset: 0,
                    color: '#FFD119' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#FFAC4C' // 100% 处的颜色
                  }
                ]
              },
              {
                colorStops: [
                  {
                    offset: 0,
                    color: '#00C0FA' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#2F95FA' // 100% 处的颜色
                  }
                ]
              }
            ]
            if (params.dataIndex < 3) {
              return colorList[0]
            } else {
              return colorList[1]
            }
          }
        },
        barWidth: 16,
        data: yValue
      },
      {
        name: '背景',
        type: 'bar',
        barWidth: 16,
        barGap: '-100%',
        yIndex: 1,
        itemStyle: {
          color: 'rgba(24,31,68,.16)',
          borderRadius: 30
        },
        data: yValue.map(() => max)
      }
    ]
  }

  return {
    options
  }
}
